<template>
	<view class="bg">
		<view class="" :style="{height: menuTopHeight + 'px'}"></view>
		<view class="menu-box" :style="{height: menuHeight + 'px'}">
			<u-icon name="arrow-left" color="#fff" size="20" @click="goBack"></u-icon>
			<view class="navigate-title">支付确认</view>
		</view>
		<view class="bg-circle">
			<u-image width="100%" height="370rpx" src="/static/images/b4.png"></u-image>
		</view>
	</view>
	<view class="container">
		<view class="success-box">
			<view class="tip-box">
				<u-image width="54rpx" height="54rpx" src="/static/images/a28.png"></u-image>
				<view class="tip">支付成功</view>
			</view>
			<view class="price-box">
				<text>￥</text>
				<text class="price">153.00</text>
			</view>
		</view>
	</view>

	<view class="btn">
		<u-button throttleTime="1000"
			:customStyle="{height: '86rpx', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)', letterSpacing: '.1rem'}" :hairline="false"
			type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)"
			@click="completeHandle">完成</u-button>
	</view>
</template>

<script setup>
	import {
		useHeight
	} from '@/hooks/useMenuHeight'
	const {
		menuHeight,
		menuTopHeight
	} = useHeight()
	
	const type = ref('')
	
	onLoad(({status}) => {
		type.value = status
	})
	
	const goBack = () => {
		uni.navigateBack()
	}

	// 跳转订单
	const completeHandle = () => {
		console.log(type.value);
		if (type.value == 'vip') {
			uni.navigateBack()
		} else {
			uni.navigateTo({
				url: '/mine/order/list'
			})
		}
	}
</script>

<style scoped lang="scss">
	.bg {
		width: 100vw;
		height: 370rpx;
		position: relative;

		.menu-box {
			padding-left: 26rpx;
			color: #fff;
			display: flex;
			align-items: center;

			.navigate-title {
				color: #fff;
				font-size: 36rpx;
				color: #FFFFFF;
				margin-left: 18rpx;
			}
		}

		// z-index: -1;
		.bg-circle {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 100%;
		}
	}

	.container {
		position: relative;
		z-index: 19;
		padding: 0 30rpx;
		margin-top: -150rpx;
	}

	.success-box {
		padding: 90rpx 0 60rpx;
		background: rgba(255, 255, 255, .6);
		border-radius: 30rpx;
		@include center();
		flex-direction: column;
		backdrop-filter: blur(20rpx);

		.tip-box {
			@include center();

			.tip {
				font-size: 48rpx;
				color: #000000;
				margin-left: 24rpx;
				font-weight: bold;
			}
		}

		.price-box {
			margin-top: 50rpx;
			font-weight: bold;
			color: #D86626;
			font-size: 40rpx;

			.price {
				font-size: 80rpx;
			}
		}
	}

	.btn {
		padding: 0 55rpx;
		width: 100%;
		position: fixed;
		left: 50%;
		bottom: 70rpx;
		transform: translateX(-50%);
		z-index: 9;
	}
</style>